<template>
  <div class="console-panel" v-if="isOpen">
    <!-- todo -->
    <!-- <div class="resize"></div> -->
    <logPanel v-if="consolePanel.log" />
    <vuexPanel v-if="consolePanel.vuex" />
  </div>
</template>

<script>
import logPanel from './logPanel'
import vuexPanel from './vuexPanel'
import { mapState } from 'vuex'

// 控制台 zhu18-9-25
export default {
  data() {
    return {}
  },
  watch: {
    isOpen(v) {
      let dom = document.querySelector('.gs-dev-tools')
      if (v) {
        dom && (dom.style.top = 'calc(100% - 252px)')
      } else {
        dom && (dom.style.top = 'calc(100% - 51px)')
      }
    },
    animateDebug(v) {
      if (!this.isOpen) return
      let dom = document.querySelector('.gs-dev-tools')
      if (v) {
        dom && (dom.style.top = 'calc(100% - 252px)')
      } else {
        dom && (dom.style.top = 'calc(100% - 51px)')
      }
    }
  },
  computed: {
    ...mapState('cmlpanel', ['consolePanel']),
    ...mapState('animate', ['animateDebug']),
    isOpen() {
      return this.consolePanel.log || this.consolePanel.vuex
    }
  },
  mounted() {},
  methods: {},
  components: {
    logPanel,
    vuexPanel
  }
}
</script>

<style lang="scss" scoped>
.console-panel {
  display: flex;

  position: absolute;
  bottom: 70px;
  left: 1px;

  width: calc(100% - 2px);
  height: 200px;
  border-top: 1px solid #a2d5d226;

  background-color: rgba(30, 36, 36, 0.8);

  font-family: console;
  & > div {
    &:nth-last-child(2) {
      border-right: 1px solid #525252;
    }
  }
  .resize {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2px;
    cursor: ns-resize;
  }
}
</style>
